<template>
	<view class="app-container">
		<authorize @onLoadFun="onLoadFun" v-model="isHidden" isGoIndex></authorize>
		<!-- 用户信息 -->
		<view class="user">
			<!-- 头像 -->
			<view class="left"><image :src="userInfo.avatar_url ? userInfo.avatar_url : 'http://iph.href.lu/50x50'" @tap="toSetting"></image></view>
			<!-- 昵称,个性签名 -->
			<view class="right grid col-1 flex-direction justify-between">
				<view class="username" @tap="toLogin">{{ userInfo.nick_name || '点击授权' }}</view>
				<view class="phone text-bold" v-if="userInfo.telephone">{{ userInfo.telephone }}</view>
				<!-- <button class="phone" v-else open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">未绑定手机号码</button> -->
				<!-- <view class="signature" @tap="toSetting">去提现 > </view> -->
				<view class="info">
					<!-- <view class="inline-block margin-right text-grey">已帮助: {{ userInfo.help_num || 0 }}</view> -->
					<view class="inline-block text-grey">云币: {{ userInfo.account_balance || 0 }}</view>
				</view>
			</view>
		</view>
		<!-- 广告栏 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="swiperChange">
					<swiper-item v-for="(swiper, i) in swiperList" :key="i">
						<image :src="fileUrl + swiper.path" mode="aspectFill" @tap="toSwiper(swiper)"></image>
					</swiper-item>
				</swiper>
				<view class="indicator"><view class="dots" v-for="(swiper, index) in swiperList" :class="[currentSwiper >= index ? 'on' : '']" :key="index"></view></view>
			</view>
		</view>
		<!-- 菜单栏 -->
		<view class="card margin-top">
			<view class="cu-list grid col-3 no-border">
				<view class="cu-item" v-for="(item, index) in menuList" :key="index" @tap="navigateToRoute(item)">
					<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]" :style="{ color: item.color }">
						<view class="cu-tag badge" v-show="item.tag > 0"><block>{{ item.tag > 99 ? '99+' : item.tag }}</block></view>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<image src="/static/img/support.png" class="support"></image>
	</view>
</template>

<script>
import authorize from '@/components/authorize/authorize';
import { mapGetters, mapMutations } from 'vuex';
import { decodeTelephone, getUserInfo, getDynamicMenuStatisticsNum } from '@/api/user';
import { getAdvertising } from '@/api/common.js';
import { VUE_APP_BASE_API } from '@/common/tools/config.js';
export default {
	components: {
		authorize
	},
	data() {
		return {
			fileUrl: VUE_APP_BASE_API,
			currentSwiper: 0,
			// 轮播图片
			swiperList: [],
			menuList: [
				{
					cuIcon: 'cardboardfill',
					name: '我提交的',
					route: '/user-pages/released-order?index=0',
					color: 'red'
				},
				{
					cuIcon: 'brandfill',
					name: '我接单的',
					route: '/user-pages/released-order?index=1',
					color: 'cyan'
				},
				{
					cuIcon: 'discoverfill',
					name: '打印历史',
					route: '/user-pages/history',
					color: 'mauve'
				},
				{
					cuIcon: 'emojiflashfill',
					name: '邀请有礼',
					route: '/user-pages/invite',
					color: '#ffc247'
				},
				{
					cuIcon: 'ticket',
					name: '我的优惠券',
					route: '/user-pages/coupon',
					color: '#3abf94'
				},
				{
					cuIcon: 'questionfill',
					name: '反馈',
					route: '/user-pages/feedback',
					color: '#3abf94'
				}
			],
			userInfo: {},
			isHidden: false
		};
	},
	onShow() {
		const _this = this;
		wx.getSetting({
			success(res) {
				if (!res.authSetting['scope.userInfo']) {
					_this.isHidden = false;
				} else {
					_this.isHidden = true;
					if (!_this.userInfo.wechat_user_id) _this.getUserInfoEvent();
					_this.getDynamicMenuStatisticsNumEvent()
					_this.getAdvertisingEvent()
				}
			}
		});
	},
	methods: {
		...mapMutations({
			setUser: 'user/SET_USER',
			setPhoneNumber: 'user/SET_PHONE_NUMBER'
		}),
		onLoadFun() {
			this.getUserInfoEvent();
		},
		/**
		 * 查询动态菜单和统计菜单数字小标
		 */
		getDynamicMenuStatisticsNumEvent() {
			getDynamicMenuStatisticsNum().then(res => {
				this.menuList = res.result.menu.map( v => {
					const k = res.result.num.find(value => {
						return value.dynamic_menu_id === v.dynamic_menu_id
					}) || 0
					v['tag'] = k.total
					return v
				})
			})
		},
		/**
		 * 获取用户信息
		 */
		getUserInfoEvent() {
			return new Promise((resolve, reject) => {
				getUserInfo().then(res => {
					this.setUser(res.result);
					this.userInfo = res.result;
					resolve(res.result);
				});
			});
		},
		//查询广告栏图片数组
		getAdvertisingEvent() {
			getAdvertising({
				//1为'我的'页面广告位，2为'我发布的'页面广告位
				advertisingType: 1
			}).then(res => {
				this.swiperList = res.result.path
			})
		},
		toLogin() {
			if (this.userInfo.nick_name || this.userInfo.avatar_url) {
				return false;
			}
			this.isHidden = false;
		},
		toSetting() {},
		//轮播图指示器
		swiperChange(event) {
			this.currentSwiper = event.detail.current;
		},
		//轮播图跳转
		toSwiper(swiper) {
			if(swiper.advertising_type === 0) {
				const src = encodeURIComponent(swiper.url);
				uni.navigateTo({
					url: `/pages/web-view?src=${src}`
				})
				
			}else if(swiper.advertising_type === 1) {
				uni.navigateTo({
					url: swiper.url
				})
			}
			
		},
		/**
		 * 跳转路由
		 * @param item
		 */
		navigateToRoute(item) {
			uni.navigateTo({
				url: item.route,
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		/**
		 * 获取手机号回调
		 * @param e 手机号码加密信息
		 */
		getPhoneNumber(e) {
			decodeTelephone(e.detail).then(res => {
				this.setPhoneNumber(res.result.purePhoneNumber);
			});
		}
	}
};
</script>

<style lang="scss">
.user {
	display: flex;
	align-items: center;

	.left {
		width: 20vw;
		height: 20vw;
		flex-shrink: 0;
		margin-right: 20upx;
		border-radius: 100%;
		box-shadow: $uni-box-shadow;

		image {
			width: 20vw;
			height: 20vw;
			border-radius: 0 20upx 20upx;
		}
	}

	.right {
		width: 100%;
		height: 20vw;
		margin-left: 20upx;

		.inline-block {
			display: inline-block;
		}

		.username {
			font-size: 36upx;
			font-weight: 600;
			color: #172575;
		}
		.phone {
			font-size: 28rpx;
			color: #8799a3;
			padding: 0;
			background-color: #fff;
			border: none;
			text-align: left;
			margin: 0;
			line-height: 32rpx;
			height: 32rpx;

			&::after {
				border: none;
			}
		}
		.signature {
			color: #c1c1c1;
			font-size: 28upx;
		}
	}
}

.swiper {
	width: 100%;
	margin-top: 16px;
	display: flex;
	justify-content: center;

	.swiper-box {
		width: 100%;
		height: 40vw;
		overflow: hidden;
		border-radius: 0 20upx 20upx;
		box-shadow: $uni-box-shadow;
		//兼容ios，微信小程序
		position: relative;
		z-index: 1;

		swiper {
			width: 100%;
			height: 40vw;

			swiper-item {
				image {
					width: 100%;
					height: 40vw;
				}
			}
		}

		.indicator {
			position: absolute;
			top: 20upx;
			left: 20upx;
			background-color: rgba(255, 255, 255, 0.4);
			width: 150upx;
			height: 5upx;
			border-radius: 3upx;
			overflow: hidden;
			display: flex;

			.dots {
				width: 0upx;
				background-color: rgba(255, 255, 255, 1);
				transition: all 0.3s ease-out;

				&.on {
					width: (100%/3);
				}
			}
		}
	}
}

.card {
	width: 100%;
	box-shadow: $uni-box-shadow;
	border-radius: 0 20 upx 20 upx;

	.cu-list {
		border-radius: $uni-border-radius-base;
	}
}
.support {
	width: 180rpx;
	height: 180rpx;
	margin: 54rpx auto;
	display: block;
}
</style>
